<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件处理</title>

    <script src="./../vue/vue.js"></script>

    <style>

    </style>
</head>
<body>


    <!-- 
        v-on 监听事件

        监听的方法有一个默认参数 event ,如果是DOM事件，则会有值

        事件修饰符：
            1、prevent  过滤原始事件，比如a标签的跳转事件
            2、stop     阻止冒泡事件、传递事件
            3、capture  捕获期间触发事件，不会阻止事件往下捕获
            4、self     只有触发自身时调用，防止事件冒泡产生的事件回调
            5、once     只触发一次的调用
            6、passive  

        按键修饰符
            @keyup.enter
            @keyup.page-down
            @keyup.down
            @keyup.up
            @keyup.left
            @keyup.right


     -->

    <div id="app">

        <div>
            <div>您点击了 {{ times }}次</div>

            <div>事件打印：{{event}}</div>
            <input type="button" value="点击" @click="onClickButton">
        </div>


        <div>
            <div>
                <a href="http://www.baidu.cn" @click.prevent>百度点击</a>
            </div>


            <div style="border: 1px solid red; width: 200px; height: 200px;" @click.once="onClickOutterDiv">
                <div style="border: 1px solid blue; width: 100px; height: 100px;" @click="onClickInnerDiv">

                </div>
            </div>

            <div>
                <input type="text" 
                    @keyup.enter="onInputEnter"
                    @keyup.left="onInputKeyupLeft"
                    @keyup.right="onInputKeyupRight"
                    @keyup.up="onInputKeyupUp"
                    @keyup.down="onInputKeyupDown">
            </div>

        </div>

    </div>

    <script>

        let vm = new Vue({
            el: "#app",
            data: {
                times:0,
                event: null
            },
            methods: {
                onClickButton(event){
                    this.event = JSON.stringify(event)
                    this.times++
                },

                onClickOutterDiv(event){
                    console.log("点击了外部的div",event?JSON.stringify(event):"")
                },

                onClickInnerDiv(event){
                    console.log("点击了内部的div",event?JSON.stringify(event):"")
                },

                onInputEnter(event){
                    console.log("onInputEnter",event)
                },

                onInputKeyupLeft(event){
                    console.log("<")
                },

                onInputKeyupRight(evnet){
                    console.log(">")
                },

                onInputKeyupDown(evnet){
                    console.log("⬇︎")
                },

                onInputKeyupUp(){
                    console.log("↑")
                }

            
            },
        })

    </script>
    
</body>
</html>